import React from "react";
import Footer from "./Footer";
import TodoList from "../components/TodoList";
import { useStore } from "laco-react";
import { TodoStore, getCompletedCount } from "../stores/todo";

const MainSection = () => {
  const { todos } = useStore(TodoStore);
  const todosCount = todos.length;
  const completedCount = getCompletedCount(todos);
  return (
    <section className="main">
      {!!todosCount && (
        <span>
          <input
            className="toggle-all"
            type="checkbox"
            defaultChecked={completedCount === todosCount}
          />
        </span>
      )}
      <TodoList />
      {!!todosCount && <Footer activeCount={todosCount - completedCount} />}
    </section>
  );
};

export default MainSection;
